<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        form {
            width: 500px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<!--
enctype="multipart/form-data" 告诉浏览器以 multipart 数据的形式提交表单，而不是以表单数据的形式进行提交(将 name=value 使用&拼接)。
在 multipart 中，每个输入域都会对应一个 part。
-->
<form th:action="@{/register}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password">
    </div>
    <!--
      accept 属性用来将文件类型限制为 JPEG、PNG 以及 GI F图片。
      根据其name 属性，图片数据将会发送到 multipart 请求中的 avatar part 之中。
      -->
    <div class="form-group">
        <label for="avatar">头像</label>
        <input type="file" id="avatar" name="avatar" accept="image/jpeg,image/png,image/gif">
        <p class="help-block">仅支持JPEG、PNG以及GIF图片，大小不超过2MB</p>
    </div>
    <button type="submit" class="btn btn-default">注册</button>
</form>
</body>
</html>